<template>
  <div
      class="icesoft-sheet"
      :class="{'icesoft-sheet_show-shadow': shadow, 'icesoft-sheet_show-radius': radius, 'icesoft-sheet_show-padding': padding}"
  >
    <slot/>
  </div>
</template>

<script setup lang="ts">

interface Props {
  shadow?: boolean,
  radius?: boolean,
  padding?: boolean,
  loading?: boolean,
}

const {shadow, radius, padding} = withDefaults(defineProps<Props>(), {
  shadow: false,
  radius: false,
  padding: false,
  loading: false,
});
</script>

<style scoped lang="scss">
.icesoft-sheet {
  position: relative;
  background-color: white;
}

.icesoft-sheet_show-shadow {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.icesoft-sheet_show-padding {
  padding: 16px;
}

.icesoft-sheet_show-radius {
  border-radius: 8px;
}
</style>
